import { Question } from "../interface";

const questions: Question[] = [
    {
        question: "以下选择器优先级最高的是：",
        radios: [
            "#header .nav li:hover",
            "div#header > ul.nav li",
            "body #header li.nav-item",
            "[id='header'] li.nav-item"
        ],
        desc: "ID选择器权重最高，组合选择器中 div#header 有1个ID和1个标签选择器"
    },
    {
        question: "关于Flex布局，错误的是：",
        radios: [
            "justify-content 控制主轴对齐",
            "align-items 控制交叉轴单行对齐",
            "flex-direction 默认值为 row-reverse",
            "flex-wrap 控制是否换行"
        ],
        desc: "flex-direction 默认值为 row 而非 row-reverse"
    },
    {
        question: "下列哪些属性可以触发BFC（块级格式化上下文）？",
        radios: [
            "float: left",
            "display: inline-block",
            "position: static",
            "overflow: hidden"
        ],
        muti: true,
        desc: "position: static 不会触发BFC，其他选项都会"
    },
    {
        question: "关于Grid布局，正确的是：",
        radios: [
            "grid-template-areas 定义区域名称",
            "grid-column-gap 已改名为 gap",
            "fr 单位表示剩余空间分配比例",
            "place-items 是 align-items 和 justify-items 的简写"
        ],
        muti: true,
        desc: "所有选项都是Grid布局的正确描述"
    },
    {
        question: "下列哪个选择器匹配所有<p>元素的第一个子元素？",
        radios: [
            "p:first-child",
            "p > :first-child",
            "p:first-of-type",
            "p::first-line"
        ],
        desc: "p > :first-child 匹配p下所有第一个子元素，p:first-child匹配的是作为长子元素的p"
    },
    {
        question: "关于position定位，错误的是：",
        radios: [
            "fixed 元素相对于视口定位",
            "sticky 元素在阈值范围内表现类似relative",
            "absolute 元素会相对于最近的positioned祖先定位",
            "relative 定位会导致元素脱离文档流"
        ],
        desc: "relative 定位不会脱离文档流，absolute/fixed/sticky会"
    },
    {
        question: "下列哪些是合法的CSS长度单位？",
        radios: [
            "vh",
            "rem",
            "ch",
            "ex"
        ],
        muti: true,
        desc: "所有选项都是CSS规范定义的长度单位"
    },
    {
        question: "关于CSS盒模型，正确的是：",
        radios: [
            "box-sizing: border-box 包含padding和border",
            "margin 不参与盒模型计算",
            "outline 影响元素实际占位空间",
            "默认盒模型是 content-box"
        ],
        muti: true,
        desc: "margin参与盒模型但不影响box-sizing计算，outline不占空间"
    },
    {
        question: "下列哪个伪类选择器匹配被用户激活的元素？",
        radios: [
            ":hover",
            ":active",
            ":focus",
            ":visited"
        ],
        desc: ":active 匹配被用户激活（如鼠标按下）时的状态"
    },
    {
        question: "关于z-index生效条件，错误的是：",
        radios: [
            "需要position为非static",
            "父容器z-index会影响子元素层叠",
            "flex/grid子项默认z-index为auto",
            "z-index值越大越靠近用户"
        ],
        desc: "flex/grid子项z-index默认为0（可层叠），不是auto"
    },
    {
        question: "下列哪些CSS属性可以继承？",
        radios: [
            "font-family",
            "color",
            "margin",
            "line-height"
        ],
        muti: true,
        desc: "margin不可继承，其他都会继承父元素值"
    },
    {
        question: "关于CSS动画，正确的是：",
        radios: [
            "animation-fill-mode 控制动画结束状态",
            "transition 需要明确指定过渡属性",
            "@keyframes 可以定义中间关键帧",
            "animation-play-state 默认值为paused"
        ],
        muti: true,
        desc: "animation-play-state默认是running"
    },
    {
        question: "下列哪个选择器匹配所有禁用的表单元素？",
        radios: [
            ":disabled",
            ":read-only",
            "[disabled]",
            ":not(:enabled)"
        ],
        muti: true,
        desc: "所有选项都能匹配禁用状态（:read-only匹配只读非禁用元素除外）"
    },
    {
        question: "关于浮动(float)，正确的是：",
        radios: [
            "浮动元素会脱离文档流",
            "clear属性可以清除浮动影响",
            "现代布局已完全替代浮动方案",
            "浮动元素会形成BFC"
        ],
        muti: true,
        desc: "浮动仍用于文字环绕等特定场景，未被完全替代"
    },
    {
        question: "下列哪个属性可以实现垂直居中？",
        radios: [
            "align-content: center",
            "place-items: center",
            "margin: auto",
            "vertical-align: middle"
        ],
        muti: true,
        desc: "vertical-align只对inline/inline-block元素有效"
    },
    {
        question: "关于CSS变量，错误的是：",
        radios: [
            "定义方式：--var-name: value",
            "使用方式：var(--var-name)",
            "作用域遵循CSS层叠规则",
            "变量名区分大小写"
        ],
        desc: "CSS变量名不区分大小写，--color和--COLOR是同一个变量"
    },
    {
        question: "下列哪些是CSS3新增的伪元素？",
        radios: [
            "::before",
            "::selection",
            "::placeholder",
            "::first-letter"
        ],
        muti: true,
        desc: "::before和::first-letter是CSS2已有的"
    },
    {
        question: "关于响应式设计，正确的是：",
        radios: [
            "@media (min-width: 768px) 是移动优先写法",
            "vw单位相对于视口宽度",
            "移动端通常需要设置<meta name='viewport'>",
            "rem单位相对于根元素字体大小"
        ],
        muti: true,
        desc: "所有选项都是响应式设计的正确实践"
    },
    {
        question: "下列哪个属性可以创建3D变换效果？",
        radios: [
            "transform: rotateX(45deg)",
            "perspective: 500px",
            "backface-visibility: hidden",
            "transform-style: flat"
        ],
        muti: true,
        desc: "transform-style: flat会禁用3D空间，其他都参与3D效果"
    },
    {
        question: "关于CSS层叠规则，错误的是：",
        radios: [
            "!important规则优先级最高",
            "内联样式权重大于ID选择器",
            "相同权重下后定义的样式生效",
            "通配符选择器权重高于标签选择器"
        ],
        desc: "通配符(*)选择器权重为0，低于标签选择器(权重1)"
    }
];

export default questions;